import React, { useEffect } from 'react';
import Slider from '../../components/slider/';
import { connect } from 'react-redux';
import * as actionTypes from './store/actionCreators';
import RecommendList from '../../components/list/';
import { renderRoutes } from 'react-router-config';

function Recommend(props) {
    const { bannerList, recommendList } = props;

    const { getBannerDataDispatch, getRecommendListDataDispatch } = props;

    useEffect(() => {
        if(!bannerList.length){
            getBannerDataDispatch();
        }
        if(!recommendList.length){
            getRecommendListDataDispatch();
        }
    },[]);
    
    return(
        <div>
            <Slider bannerList = { bannerList }></Slider>
            <RecommendList recommendList={recommendList}></RecommendList>
        </div>
    )
}

// 映射Redux全局的state到组件的props上
const mapStateToProps = (state) => ({
    bannerList: state.getIn(['recommend', 'bannerList']).toJS(),
    recommendList: state.getIn(['recommend', 'recommendList']).toJS()
});
// // 映射dispatch到props上
const mapDispatchToProps = (dispatch) => {
    return {
        getBannerDataDispatch() {
            dispatch(actionTypes.getBannerList());
        },
        getRecommendListDataDispatch() {
            dispatch(actionTypes.getRecommendList());
        }
    }
};

export default connect(mapStateToProps, mapDispatchToProps) (React.memo(Recommend));